<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="服务详情"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 滚动内容 -->
    <scroll-view class="scroll-content" :scroll-y="true">
      <!-- 服务头部信息 -->
      <view class="service-header">
        <image :src="serviceInfo.image" class="header-image" mode="aspectFit" />
        <view class="header-info">
          <text class="service-name">{{ serviceInfo.name }}</text>
          <view class="price-row">
            <text class="price">¥ {{ serviceInfo.price }}</text>
            <text class="unit">{{ serviceInfo.unit }}</text>
          </view>
        </view>
      </view>

      <!-- 简介 -->
      <view class="intro-section">
        <text class="section-title">简介</text>
        <text class="intro-text">{{ serviceInfo.intro }}</text>
      </view>

      <!-- 数量选择 -->
      <view class="quantity-section">
        <text class="quantity-label">数量：</text>
        <view class="quantity-control">
          <view
            class="quantity-btn"
            :class="{ disabled: quantity <= 1 }"
            @click="decreaseQuantity"
          >
            <uni-icons type="minus" size="20" color="#666"></uni-icons>
          </view>
          <input
            v-model.number="quantity"
            class="quantity-input"
            type="number"
            @blur="validateQuantity"
          />
          <view class="quantity-btn" @click="increaseQuantity">
            <uni-icons type="plus" size="20" color="#666"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 详情图片 -->
      <view class="detail-images">
        <image
          v-for="(img, index) in serviceInfo.detailImages"
          :key="index"
          :src="img"
          class="detail-image"
          mode="widthFix"
        />
      </view>
    </scroll-view>

    <!-- 底部固定按钮 -->
    <view class="footer-actions">
      <view class="action-btn btn-cart" @click="handleAddToCart">
        <text>加入购物车</text>
      </view>
      <view class="action-btn btn-buy" @click="handleBuyNow">
        <text>立即购买</text>
      </view>
    </view>

    <!-- 左下角购物车按钮 -->
    <view class="cart-float-btn" @click="handleGoToCart">
      <uni-icons type="cart" size="24" color="#FFB200"></uni-icons>
      <view v-if="cartCount > 0" class="cart-badge">
        <text>{{ cartCount > 99 ? "99+" : cartCount }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 服务信息
const serviceInfo = ref({
  id: 1,
  name: "智慧版授权",
  price: "1.00",
  unit: "/天",
  image: "/static/logo.png",
  intro:
    "我店智慧版，是一款专为商家精心打造的升级服务产品，成为我店智慧版的授权客户，您将彻底告别统一线单店管营模式，并启用双店送店送营新量，在我店智慧版商家端 PC 版，主门店商家能够对旗下子门店进行全方位管理，主门店商家还能从子门店的每一笔订单中抽取积分，实现收益的多元化增长。",
  detailImages: ["/static/logo.png"],
});

// 数量
const quantity = ref(1);

// 购物车数量
const cartCount = ref(0);

// 页面加载时获取服务 ID
onLoad((options) => {
  if (options.id) {
    console.log("服务 ID:", options.id);
    // TODO: 根据 ID 加载服务详情
  }
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

// 增加数量
const increaseQuantity = () => {
  quantity.value++;
};

// 验证数量
const validateQuantity = () => {
  if (!quantity.value || quantity.value < 1) {
    quantity.value = 1;
  }
  quantity.value = Math.floor(quantity.value);
};

// 加入购物车
const handleAddToCart = () => {
  console.log("加入购物车:", serviceInfo.value, "数量:", quantity.value);
  cartCount.value += quantity.value;
  uni.showToast({
    title: "已加入购物车",
    icon: "none",
  });
  // TODO: 调用加入购物车接口
};

// 立即购买
const handleBuyNow = () => {
  console.log("立即购买:", serviceInfo.value, "数量:", quantity.value);
  uni.showToast({
    title: "立即购买",
    icon: "none",
  });
  // TODO: 跳转到订单确认页面
};

// 跳转到购物车
const handleGoToCart = () => {
  uni.navigateTo({
    url: "/pages/mine/valueAddedService/cart",
  });
};

onMounted(() => {
  console.log("服务详情页面加载完成");
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

// 滚动内容
.scroll-content {
  height: calc(100vh - 88rpx - 120rpx);
}

// 服务头部
.service-header {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.header-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.service-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.price {
  font-size: 40rpx;
  color: #ff4d4f;
  font-weight: 700;
}

.unit {
  font-size: 24rpx;
  color: #999;
}

// 简介
.intro-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.intro-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
}

// 数量选择
.quantity-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &:active {
    opacity: 0.7;
  }
}

.quantity-input {
  width: 100rpx;
  height: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  border: none;
  background-color: transparent;
}

// 详情图片
.detail-images {
  background-color: #fff;
  padding: 30rpx;
}

.detail-image {
  width: 100%;
  display: block;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

// 底部固定按钮
.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  text {
    font-size: 32rpx;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}

.btn-cart {
  background-color: #fff;
  border: 2rpx solid #ffb200;
  margin-right: 20rpx;

  text {
    color: #ffb200;
  }
}

.btn-buy {
  background-color: #ffb200;

  text {
    color: #333;
  }
}

// 右下角购物车按钮
.cart-float-btn {
  position: fixed;
  right: 30rpx;
  bottom: calc(140rpx + env(safe-area-inset-bottom));
  width: 96rpx;
  height: 96rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 99;

  &:active {
    opacity: 0.8;
  }
}

.cart-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  min-width: 32rpx;
  height: 32rpx;
  background-color: #ff4d4f;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;

  text {
    font-size: 20rpx;
    color: #fff;
    font-weight: 600;
  }
}
</style>
